<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/firstdemo/CSS/w3.css">
<link rel="stylesheet" href="/firstdemo/CSS/google.css">
<link rel="stylesheet" href="/firstdemo/fontawesome/css/all.css">
<style>
    html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
    a{TEXT-DECORATION:none}
</style>


<head>
    <base href="<%=basePath%>">
    <title>查询用户页面</title>
</head>
<body class="w3-light-grey">

<!-- Top container -->
<div class="w3-bar w3-top w3-teal w3-large" style="z-index:4">
    <button class="w3-bar-item w3-button w3-hide-large w3-hover-none w3-hover-text-light-grey" onclick="w3_open();"><i class="fa fa-bars"></i>  Menu</button>
    <span class="w3-bar-item w3-right">Logo</span>
</div>

<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar"><br>
    <div class="w3-container w3-row">
        <div class="w3-col s4">
            <img src="/firstdemo/images/avatar2.png" class="w3-circle w3-margin-right" style="width:46px">
        </div>
        <div class="w3-col s8 w3-bar">
            <span>Welcome, <strong>${username}</strong></span><br>
            <a  class="w3-bar-item w3-button"><i class="fa fa-envelope"></i></a>
            <a  class="w3-bar-item w3-button"><i class="fa fa-user"></i></a>
            <a  class="w3-bar-item w3-button"><i class="fa fa-cog"></i></a>
        </div>
    </div>
    <hr>
    <div class="w3-container">
        <h5>Dashboard</h5>
    </div>
    <div class="w3-bar-block">
        <a  class="w3-bar-item w3-button w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black" onclick="w3_close()" title="close menu"><i class="fa fa-remove fa-fw"></i>  Close Menu</a>
        <a  class="w3-bar-item w3-button w3-padding w3-blue" id="lookupbar"><i class="fa fa-eye fa-fw"></i>
              <botton id = "lookup">查询</botton></a>

        <a  class="w3-bar-item w3-button w3-padding" id="quitbar" href="BacktoLogin"><i class="fa fa-history fa-fw"></i>
              <botton id = "quit">退出用户</botton></a>
    </div>
</nav>


<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>

<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px;margin-top:43px;">

    <!-- Header -->
    <header class="w3-container" style="padding-top:22px">
        <h5><b><i class="fa fa-dashboard"></i> My Dashboard</b></h5>
    </header>

    <form action="SelectUserList"method="post" >
        <input type="hidden" value=${username} name="username" style="display: none" >
        <div id = "alter1" class="w3-margin-bottom" >
            <div id = "alter11" class="w3-row-padding" >
                <div class="w3-quarter" data-tilt>
                    <div class="w3-container w3-red w3-padding-16" style="height: 150px">
                        <div class="w3-right"><i class="fa fa-comment w3-xxxlarge"></i></div>
                        <div class="w3-left">
                            <h3>输入ID</h3>
                        </div>
                        <div class="w3-clear"></div>
                        <input class="w3-input w3-text" name="id" type="text">
                    </div>
                </div>
                <div class="w3-quarter" data-tilt>
                    <div class="w3-container w3-blue w3-padding-16" style="height: 150px">
                        <div class="w3-right"><i class="fa fa-eye w3-xxxlarge"></i></div>
                        <div class="w3-left">
                            <h3>输入用户名</h3>
                        </div>
                        <div class="w3-clear"></div>
                        <input class="w3-input w3-text" name="name" type="text">
                    </div>
                </div>
            </div>

            <div class="w3-padding-16"></div>

            <div id = "alter12" class="w3-row-padding" >
                <div class="w3-quarter" data-tilt>
                    <div class="w3-container w3-teal w3-padding-16" style="height: 150px">
                        <div class="w3-right"><i class="fa fa-share-alt w3-xxxlarge"></i></div>
                        <div class="w3-left">
                            <h3>选择性别</h3>
                        </div>
                        <div class="w3-clear"></div>
                        <div class="w3-bar">
                            <input class="w3-radio" type="radio" name="sex" value="男" checked><lable>男</lable>
                            <input class="w3-radio" type="radio" name="sex" value="女"><label>女</label>
                        </div>
                    </div>
                </div>
                <div class="w3-quarter" data-tilt>
                    <div class="w3-container w3-orange w3-text-white w3-padding-16" style="height: 150px">
                        <div class="w3-right"><i class="fa fa-users w3-xxxlarge"></i></div>
                        <div class="w3-left">
                            <h3>选择家乡</h3>
                        </div>
                        <div class="w3-clear"></div>
                        <select class="w3-select" name="home" style="width: 60%">
                            <option value="" disabled selected>选择家乡</option>
                            <option value="上海">上海</option>
                            <option value="北京">北京</option>
                            <option value="纽约">纽约</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="w3-padding-32"></div>
            <div class="w3-bar w3-row-padding ">
                <div class="w3-bar-item " style="width:10%">
                    <button class="w3-button w3-input w3-teal " type="submit"value="查询">查询</button>
                </div>
                <div class="w3-bar-item " style="width:10%">
                    <button class="w3-button w3-input w3-red " type="reset"value="重置">重置</button>
                </div>
            </div>
        </div>

    </form>



    <!-- $# show page list -->
    <div id = "alter6" class="w3-container w3-dark-grey w3-padding-32">
        <div class="w3-row">
            <div class="w3-container w3-third">
                <h5 class="w3-bottombar w3-border-green">Demographic</h5>
                <p>Language</p>
                <p>Country</p>
                <p>City</p>
            </div>
            <div class="w3-container w3-third">
                <h5 class="w3-bottombar w3-border-red">System</h5>
                <p>Browser</p>
                <p>OS</p>
                <p>More</p>
            </div>
            <div class="w3-container w3-third">
                <h5 class="w3-bottombar w3-border-orange">Target</h5>
                <p>Users</p>
                <p>Active</p>
                <p>Geo</p>
                <p>Interests</p>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="w3-container w3-padding-16 w3-light-grey">
        <h4>FOOTER</h4>
        <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css + BUAA</a></p>
    </footer>

    <!-- End page content -->
</div>

<script type="text/javascript" src="/firstdemo/JS/vanilla-tilt.js"></script>
</body>
</html>
